<template>
	<div class="u-general-color">
		<u-navbar :title="isCreator?Navbar.title1:Navbar.title2" :custom-back="comeback" :background="Navbar.background"
			:border-bottom="false" title-width="380" :title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
		<div>
			<section>
				<div>
					<div id="imgbox">
						<div>
							<u-swiper :list="form.goodsImages.split(',')" height="750" border-radius="0"></u-swiper>
						</div>
					</div>

					<div class="u-pl-10 u-pr-10 red-area" @click="showInstructions" v-if="isCreator">
						<div>
							<div class="u-flex">
								<div class="tag" v-if="isCreator">
									我已售<span class="color-red">{{goodsActualSales?goodsActualSales:'0'}}</span>件
									预计销售报酬<span class="color-red">¥{{estimatedRevenue?estimatedRevenue:'0'}}</span>
								</div>
								<div class="tag" v-else>
									下单分享即可获得<span
										class="color-red">¥{{goods.consumerShareReward?goods.consumerShareReward:'0'}}</span>返现
								</div>
							</div>
							<div class="tips" v-if="isCreator">
								 活动累计已售{{totalGoodsSalesVolume?totalGoodsSalesVolume:'0'}}件 查看销售业绩奖励<span class="pl-3">
									<u-icon name="question-circle-fill" size="26"></u-icon>
								</span>
							</div>
							<div class="tips" v-else>
								本轮累计售出{{totalGoodsSalesVolume?totalGoodsSalesVolume:'0'}}件 查看品牌销量奖励<span class="pl-3">
									<u-icon name="question-circle-fill" size="26"></u-icon>
								</span>
							</div>
						</div>
						<div style="display: flex;flex-direction: column;text-align: right;" v-if="goods.status === '已上架'">
							<div class="price">{{endTimeContent}}</div>
							<div style="color: #ffffff;" v-if="endTimeContent != '活动已结束' && endTimeContent.indexOf('天后结束') == -1">距离活动结束仅剩</div>
						</div>
            <div style="display: flex;flex-direction: column;text-align: right;" v-else>
              <div class="price">活动已结束</div>
            </div>
					</div>

					<div class="n-price" v-if="isCreator">
						<div class="n-price__left price-area">
							<div class="u-fz-26 u-font-bold discount-price">
								&yen;{{form.unitPrice?form.unitPrice:''}}</div>
							<div class="u-pl-5 discount-tag">
								<u-tag text="玫丽专享价" mode="dark" size="mini" bg-color="#fc545d"></u-tag>
							</div>
							<span class="line-through u-pl-10">&yen;{{form.originalPrice?form.originalPrice:'0'}}</span>
						</div>
					</div>
					<div class="n-price-1" v-else>
						<div class="n-price__left price-area u-pl-15">
							<div class="u-fz-26 u-font-bold discount-price">
								&yen;{{form.unitPrice?form.unitPrice:''}}</div>
							<div class="u-pl-5 discount-tag">
								<u-tag text="玫丽专享价" mode="dark" size="mini" bg-color="#fc545d"></u-tag>
							</div>
							<span class="line-through u-pl-10">&yen;{{form.originalPrice?form.originalPrice:'0'}}</span>
						</div>
						<div class="countdown-area"  v-if="goods.status === '已上架'">
							<div class="u-fz-17 u-text-center u-font-bold u-pl-15" style="line-height: 35rpx;">{{endTimeContent}}</div>
							<div class="u-fz-8 u-text-center u-pl-15" v-if="endTimeContent != '活动已结束' && endTimeContent.indexOf('天后结束') == -1">距离活动结束仅剩</div>
						</div>
            <div class="countdown-area" v-else>
              <div class="u-fz-17 u-text-center u-font-bold u-pl-15" style="line-height: 35rpx;">活动已结束</div>
            </div>
					</div>

					<div class="u-title u-fz-18 u-pb-10 commodity-name">
						<h4 class="tit f-els-2">
							<span class="goods-title-tag u-pr-5" :style="'background-color: '+goods.attributeColor+';'" v-if="goods.productAttribute">{{goods.productAttribute}}</span>
							<span class="middile">{{form.title?form.title:''}}</span>
						</h4>
						<div class="font-thin">
							<u-tag v-for="(item, index) in form.keyWord.split(',')" :key="index" :text="item"
								type="info" mode="dark" size="mini" bg-color="#f7f5f8"
								v-if="form.keyWord && form.keyWord.split(',').length>0"></u-tag>
						</div>
					</div>

				</div>
			</section>

		</div>

		<p class="v-sperate"></p>
		<section class="j-block">
			<div class="deliver-goods1" @click="showPeculiarity" v-if="goods.peculiarity">
				<div class="peculiarity-icon">
					品质认证
				</div>
				<div class="color-gray u-flex">
					<div class="u-pr-5 peculiarity-text">
						{{goods.peculiarity}}
					</div>
					<u-icon name="arrow-right" color="#9f9d9e" size="24"></u-icon>
				</div>
			</div>
			<p class="v-sperate" v-if="goods.peculiarity"></p>
			<div class="deliver-goods" @click="viewFreight">
				<div class="left">
					<span class="color-gray">
						发货
					</span>
					<span class="u-pl-10" v-if="goods.originAddr">
						{{goods.originAddr.replaceAll('-',' ')?goods.originAddr.replaceAll('-',' '):''}} | 包邮
					</span>
					<span v-else>
						包邮
					</span>
				</div>

				<div class="color-gray">
					<span class="u-pr-5">
						偏远地区运费
					</span>
					<u-icon name="arrow-right" color="#9f9d9e" size="24"></u-icon>
				</div>
			</div>
			<div class="specs-goods" v-if="goods.specification">
				<div class="left">
					<span class="color-gray">
						规格
					</span>
				</div>
				<div class="right">
					<span>
						{{goods.specification?goods.specification:''}}
					</span>
				</div>
			</div>
		</section>

		<!-- <p class="v-sperate" v-if="fileList.length > 0"></p>
		<section class="j-block width93" v-if="fileList.length > 0">
			<div class="evaluation-show-title">
				<span class="left">测评展示</span>
				<div class="right" @click="viewAllEvaluation">
					<span class="u-pr-5">查看全部</span>
					<u-icon name="arrow-right" color="#9f9d9e" size="24"></u-icon>
				</div>
			</div>
			<div class="pictrues-box">
				<div v-for="(item,index) in fileList" :key="index" style="padding: 5rpx;position: relative;"
					v-if="index<3">
					<u-image width="225rpx" height="225rpx" :src="item.url"></u-image>
				</div>
			</div>
		</section> -->

		<p class="v-sperate"></p>
		<section class="j-block width93">
			<div id="qualityreport"></div>
			<div style="margin: 10rpx 0rpx;">
				<span class="goods-details-title">商品详情</span>
			</div>
			<div class="u-mb-10">
				<u-parse :html="this.escape2Html(goods.detail)"></u-parse>
			</div>
			<div class="modal-item" @click="viewNotice">
				<div>
					购买须知
				</div>
				<div style="font-size: smaller;">
					<u-icon name="arrow-right" color="#9f9d9e" size="24"></u-icon>
				</div>
			</div>
			<div class="modal-item" @click="salesService">
				<div>
					售货服务
				</div>
				<div style="font-size: smaller;">
					<u-icon name="arrow-right" color="#9f9d9e" size="24"></u-icon>
				</div>
			</div>
		</section>

		<p class="v-sperate" v-if="isCreator"></p>
		<div class="u-mb-10 solitaire-box width93" v-if="isCreator">
			<div>
				<u-divider height="100" fontSize="34" color="#000000" margin-top="20" margin-bottom="20"
					bg-color="#fffbfe">销售记录</u-divider>
			</div>
			<view class="certificate">
				<view class="certificateItemMain" v-if="solitaireRecords&&solitaireRecords.length>0">
					<view class="certificateItem messageItem" v-for="(item,index) in solitaireRecords">
						<view class="messageTop" @click="toRecordDetails(item)">
							<view class="imgbox" style="overflow: inherit;">
								<image class="_img" :src="item.partnerAvatarUrl"></image>
							</view>
							<view class="name">
								<view class="text1">{{item.joinTime}}</view>
								<view class="text2" style="display: flex;justify-content: space-between;font-weight: bold;">
									<view style="width: 420rpx; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">{{form.goodsName}}</view>
									<view style="font-weight: 400;">购买数量x{{item.buyQuantity}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="item-area u-pt-50 u-pb-50" style="margin: 0 auto;">
						<u-empty text="暂无记录" mode="data"></u-empty>
					</view>
				</view>
			</view>
		</div>

		<div style="height: 220rpx;"></div>

		<article class="m-buybar">
      <div v-if="goods.status === '已上架'">
        <!-- 团长视角 -->
        <div class="btn-wrap" v-if="isCreator">
          <button class="customStyle-btn" @click="openCustomerServiceChat">
            <u-icon name="kefu-ermai" color="#000000" size="45"></u-icon>
            <span class="customStyle-btn-span">客服</span>
          </button>
          <div class="u-pl-5">
            <div class="have-a-try" @click="showCashReturn">
              <span>立即购买</span>
            </div>
            <!-- <div class="have-a-try" @click="showCashReturn">
              <div class="u-flex">
                <div class="u-fz-10">返</div>
                <div class="u-fz-18 price">&yen;{{selfPurchasedReturn?selfPurchasedReturn:0}}</div>
              </div>
              <div class="u-fz-10">自己购买</div>
            </div> -->
          </div>
          <div class="share-link tpink-btn-bgcolor u-ml-5" @click="wakeUpShare">
            <div class="u-flex">
              <div class="u-fz-10">至少赚</div>
              <div class="u-fz-18 price">&yen;{{parseFloat(goods.foremanReward?goods.foremanReward:0)}}</div>
            </div>
            <div class="u-fz-10">邀请好友购买</div>
          </div>
          <div>
            <ShareBtn :docUnid="shareData2.docUnid" :url="shareData2.url" :route="shareData2.route"
                      :style="shareData2.style" :type="shareData2.type" :posterData="shareData2.posterData"
                      :btn="shareData2.btn" :btnText="shareData2.btnText" @successCallBack="shareSuccessCallBack" ref="sharebtn">
            </ShareBtn>
          </div>
        </div>
        <!-- 消费者视角 -->
        <div class="btn-wrap" v-else>
          <button class="customStyle-btn" @click="openCustomerServiceChat">
            <u-icon name="kefu-ermai" color="#000000" size="45"></u-icon>
            <span class="customStyle-btn-span">客服</span>
          </button>
          <!-- <button class="customStyle-btn" @click="doCollect">
            <u-icon name="star-fill" color="#f02323" size="45" v-if="collected"></u-icon>
            <u-icon name="star" color="#000000" size="45" v-else></u-icon>
            <span class="customStyle-btn-span" v-if="collected">已收藏</span>
            <span class="customStyle-btn-span" v-else>收藏</span>
          </button> -->
          <div v-if="goods.status == '已上架'">
            <ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route"
                      :style="shareData.style" :type="shareData.type" :posterData="shareData.posterData"
                      :btn="shareData.btn" :btnText="shareData.btnText" :shareBtnStyle="shareData.shareBtnStyle"
                      @successCallBack="shareSuccessCallBack">
            </ShareBtn>
          </div>
          <div class="have-a-try1" @click="showTips" v-else>
            <div class="u-fz-15">邀请好友购买</div>
          </div>

          <div class="u-pl-5">
            <u-button :custom-style="buynowStyle" hover-class="none" @click="soonDelegation">
              立即购买
            </u-button>
          </div>
        </div>
      </div>
      <div class="btn-wrap" v-else>
        <button class="customStyle-btn" @click="openCustomerServiceChat">
          <u-icon name="kefu-ermai" color="#000000" size="45"></u-icon>
          <span class="customStyle-btn-span">客服</span>
        </button>
        <div class="shel-a-try">
          <div class="u-fz-15">
            活动商品已下架
          </div>
        </div>
      </div>

		</article>

		<!-- 商品销售报酬与业绩奖励(团长) -->
		<u-modal v-model="salesInstructions_show" confirm-text="已知晓" title="商品销售报酬与业绩奖励" confirm-color="#eb5468">
			<div class="slot-content2">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<p>1、通过「分享自己销售链接」售出的商品，销售每件至少可得<span class="color-red">¥{{goods.foremanReward}}</span>工作报酬；</p>
					<p>2、距离本期活动时间还有<span class="color-red">{{endTimeContent}}</span>，当前已累计售出<span class="color-red">{{totalGoodsSalesVolume}}</span>件；</p>
					<p>3、活动结束后，可获得由品牌方给出的销售奖励：</p>
					<div>
						<p>(1)平台总销量达100件，您最高获<span class="color-red">¥{{parseFloat(goods.hundredOnlineCashback?goods.hundredOnlineCashback:0) + parseFloat(goods.hundredProviderCashback?goods.hundredProviderCashback:0)}}/件</span></p>
						<p>(2)平台总销量达1000件，您最高获<span class="color-red">¥{{parseFloat(goods.thousandOnlineCashback?goods.thousandOnlineCashback:0) + parseFloat(goods.thousandProviderCashback?goods.thousandProviderCashback:0)}}/件</span></p>
						<p>(3)平台总销量达10000件，您最高获<span class="color-red">¥{{parseFloat(goods.tenThousandOnlineCashback?goods.tenThousandOnlineCashback:0) + parseFloat(goods.tenThousandProviderCashback?goods.tenThousandProviderCashback:0)}}/件</span></p>
					</div>
					<p class="u-pt-10">【注意事项】</p>
					<div class="u-pl-5">
						<p>1、最高奖励需前往【我的】--申请成为【区域服务商】；</p>
						<p>2、确认收货后，销售报酬立即发放到您的平台钱包，自行提现；</p>
						<p>3、如销量达到指定要求，活动结束后<span class="color-red">7</span>天内将对<span class="color-red">已确认收货的订单</span>进行奖励结算，奖金将直接发放至对应的平台钱包，自行提现。（区域服务商奖励除外）</p>
					</div>
				</scroll-view>
			</div>
		</u-modal>
		<!-- <u-modal v-model="salesInstructions_show" confirm-text="已知晓" title="商品销售报酬与业绩奖励" confirm-color="#e55e97">
			<div class="slot-content2">
				<p>1、每销售一份商品可得<span
						class="color-red">¥{{goods.foremanReward?goods.foremanReward:'0'}}</span>工作报酬，您已售出<span
						class="color-red">{{goodsActualSales?goodsActualSales:'0'}}</span>件 预计收入<span
						class="color-red">¥{{estimatedRevenue?estimatedRevenue:'0'}}</span>；
				</p>
				<p>2、<span v-if="endTimeContent != '活动已结束' && endTimeContent.indexOf('天后结束') == -1">距离活动结束时间剩余</span><span
						class="color-red">{{endTimeContent}}</span>，当前共累计售出<span
						class="color-red">{{totalGoodsSalesVolume?totalGoodsSalesVolume:'0'}}</span>件，活动结束前累计销量达到指定要求，您、消费者、区域服务商将共同获得由品牌方给出的销售业绩奖励；
				</p>
				<p>3、销售业绩要求如下：</p>
				<div class="u-pl-10">
					<p>（1）销量达到100件时，返<span class="color-red">5%</span>的品牌奖励
					</p>
					<p>（2）销量达到1000件时，返<span
							class="color-red">10%</span>的品牌奖励</p>
					<p>（3）销量达到10000件时，返<span
							class="color-red">15%</span>的品牌奖励</p>
				</div>
				<p>4、品牌方奖励分配如下：</p>
				<div class="u-pl-10">
					<p>（1）【您】返<span
							class="color-red">{{goods.hundredOnlineTranche?goods.hundredOnlineTranche:'0'}}</span>现金奖励
					</p>
					<p>（2）【消费者】返<span
							class="color-red">{{goods.hundredConsumerTranche?goods.hundredConsumerTranche:'0'}}</span>现金奖励
					</p>
					<p>（3）【区域服务商】返<span
							class="color-red">{{goods.hundredProviderTranche?goods.hundredProviderTranche:'0'}}</span>现金奖励
					</p>
				</div>
			</div>
		</u-modal> -->

		<!-- 品牌销量奖励(消费者) -->
		<u-modal v-model="buyInstructions_show" confirm-text="已知晓" title="品牌销量奖励" confirm-color="#eb5468">
			<div class="slot-content2">
				<p>
					<span v-if="endTimeContent != '活动已结束' && endTimeContent.indexOf('天后结束') == -1">距离活动结束时间剩余</span><span
						class="color-red">{{endTimeContent}}</span>，当前平台共累计售出<span
						class="color-red">{{totalGoodsSalesVolume?totalGoodsSalesVolume:'0'}}</span>件，活动结束前累计销量达到指定要求，您将获得由品牌方给出的销量返现奖励，具体分配如下：
				</p>
				<p>1、百人团返<span class="color-red">¥{{goods.hundredConsumerCashback?goods.hundredConsumerCashback:'0'}}/件</span>现金奖励</p>
				<p>2、千人团返<span class="color-red">¥{{goods.thousandConsumerCashback?goods.thousandConsumerCashback:'0'}}/件</span>现金奖励</p>
				<p>3、万人团返<span class="color-red">¥{{goods.tenThousandConsumerCashback?goods.tenThousandConsumerCashback:'0'}}/件</span>现金奖励</p>
				<p class="u-pt-10">备注：活动周期结束后<span class="color-red">7</span>天内对<span
						class="color-red">已确认收货的订单</span>进行奖励结算，奖金将直接发放至您的平台钱包，自行提现。 </p>
			</div>
		</u-modal>

		<!-- 偏远地区运费 -->
		<u-modal v-model="freight_show" confirm-text="已知晓" title="偏远地区运费" confirm-color="#eb5468">
			<div class="slot-content2">
				<p>{{goods.extraFreight?goods.extraFreight:'-暂无-'}}</p>
			</div>
		</u-modal>

		<!-- 购买须知 -->
		<u-modal v-model="buyNotice_show" confirm-text="已知晓" title="购买须知" confirm-color="#eb5468">
			<div class="slot-content2">
				<div class="u-title">· 正品保障</div>
				<p>平台所有商品均从品牌方直采，全程可跟踪物流，直接送到您手中，保证品质。</p>
				<div class="u-title u-pt-5">· 缺货可能</div>
				<p>部分商品抢购的人过多，可能会出现缺货情况。如遇到缺货，我们将在第一时间联系您进行退款。</p>
				<div class="u-title u-pt-5">· 价格说明</div>
				<p>1、商品详情页划线价指商品市场指导价；</p>
				<p>2、玫丽专享价仅对平台用户开放，最终以订单结算页价格为准；</p>
				<p>3、活动结束时累计销量达到指定要求，参与者将共同获得由品牌方给出的销售业绩奖励，具体以当前活动公示为准；</p>
				<p>4、最终解释权归玫丽——最佳拍档之女性工作平台。</p>
			</div>
		</u-modal>

		<!-- 玫丽售后服务 -->
		<u-modal v-model="afterSales_show" confirm-text="已知晓" title="售后服务" confirm-color="#eb5468">
			<div class="slot-content2">
				<div class="u-title">· 订单修改与取消</div>
				<p>订单支付成功后会立即传送给品牌方进行确认并备货，可尝试联系平台客服进行信息修改或取消。</p>
				<div class="u-title u-pt-5">· 物流说明</div>
				<p>一般情况下48小时内安排发货，物流信息会因时差、公休日等出现更新延迟。</p>
				<div class="u-title u-pt-5">· 退货说明</div>
				<p>商品（不支持7天无理由退换货商品除外）签收7日内可享受退货服务。</p>
				<div class="u-title u-pt-5">· 退货商品条件</div>
				<p>1、商品必须为平台售出；</p>
				<p>2、申请退货须在商品签收7日内提出，并在申请退货后3日内寄出，超期可能导致无法处理退货；</p>
				<p>3、退货商品必须未经穿着、洗涤、使用、污损（商品自身质量问题除外）等，吊牌未经拆除，商品配件及包装齐全且不影响二次销售；</p>
				<p>4、退货需先联系在线客服，直接寄回未经申请的退货商品可能导致丢件无法处理。</p>
			</div>
		</u-modal>

		<!-- 是否确定结束拼团 -->
		<u-modal v-model="endSolitaire_show" :mask-close-able="true" confirm-text="确认" show-cancel-button
			content="确定结束此拼团吗？" @confirm="endConfirm">
		</u-modal>

		<!-- 点击底部按钮参与返现弹窗(团长) -->
		<u-modal v-model="cashReturn_show" confirm-text="立即购买" :show-title="false" confirm-color="#eb5468"
			:mask-close-able="true" @confirm="goToJoin">
			<div class="slot-content4" style="text-align: center;">
				现在购买可获最高返现<span class="color-red">¥{{(parseFloat(goods.foremanReward?goods.foremanReward:0) + parseFloat(goods.consumerShareReward?goods.consumerShareReward:0) + parseFloat(goods.tenThousandProfit?goods.tenThousandProfit:0)).toFixed(2)}}</span>
			</div>

		</u-modal>

		<!-- 立即下单 返现xxx弹窗(消费者) -->
		<u-modal v-model="soonDelegation_show" confirm-text="确认" :show-title="false" confirm-color="#eb5468"
			:mask-close-able="true" @confirm="goToJoin">
			<div class="slot-content4">
				下单后分享海报给<span class="color-red">3</span>名用户查看活动，即可获得<span class="color-red">¥{{goods.consumerShareReward?goods.consumerShareReward:'0'}}</span>现金奖励！
			</div>
		</u-modal>

		<!-- 客服 -->
		<u-modal v-model="customerService_show" confirm-text="关闭" title="客服微信">
			<view class="slot-content">
				<rich-text :nodes="this.escape2Html(customerService.topPrompt)"></rich-text>
				<div class="u-center u-pt-5 u-pb-5">
					<u-image width="300rpx" height="300rpx" :src="customerService.csQrCode" @longpress="saveImg">
					</u-image>
				</div>
				<rich-text :nodes="this.escape2Html(customerService.bottomPrompt)"></rich-text>
			</view>
		</u-modal>

		<!-- 卖点弹窗 -->
		<u-modal v-model="peculiarity_show" title="玫丽·品质认证"
			confirm-text="关闭" confirm-color="#eb5468" @confirm="closePeculiarity">
			<div class="slot-content5" style="text-align: center;">
				<u-parse :html="escape2Html(escapeBR(goods.peculiarity))"></u-parse>
			</div>
		</u-modal>

	</div>
</template>

<script>
	import globalData from "@/globalData";
	import shareMixins from '@/mixins/share';

	export default {
		mixins: [shareMixins],
		data() {
			return {
				form: {},
				goods: {},
				userInfo: {},
				pageNum: 1,
				pageSize: 5,
				isClick: false,
				group_show: false,
				group_show_text: '',
				success_show: false,
				isCreator: false, // 是否为拼团创建者
				endSolitaire_show: false,
				solitaireRecords: [], // 拼团参与记录
				fileList: [], //测评成果
				goodsActualSales: '0', // 当前拼团的商品的总销售量（实际销量）
				totalGoodsSalesVolume: '0', // 当前周期的商品的总销售量
				estimatedRevenue: '0', // 预计收入
				endTimeContent: '', // 倒计时
				freight_show: false, // 偏远地区运费
				buyNotice_show: false, // 购买须知
				afterSales_show: false, // 玫丽售后服务
				salesInstructions_show: false, // 玫丽销售工作须知(团长)
				buyInstructions_show: false, // 玫丽拼团须知(消费者)
				customerService: {}, // 客服信息
				customerService_show: false,
				cashReturn_show: false, //团长视角底部按钮参与返现弹窗
				soonDelegation_show: false, //消费者视角底部按钮立即下单 返现xxx弹窗
				hundredRebateRatio: '', // 百人团返利占比
				thousandRebateRatio: '', // 千人团返利占比
				tenThousandRebateRatio: '', // 万人团返利占比
				shareData: {
					docUnid: '',
					url: '',
					route: '',
					style: 7,
					btn: '邀请好友购买',
					btnText: '活动海报',
					shareBtnStyle: 'solitaire-details-share',
					type: 2,
					posterData: {
						imageURL: '', // 商品主图URL地址
						productName: '', // 商品名称
						productPrice: '', // 商品价格
						invitemsg: '邀请您参与活动', // 邀请内容。如邀请购买商品，可不传。默认邀请
						type: 'tghd'
					},
					imageUrl: '',
					shareTitle: ''
				},
				shareData2: {
					docUnid: '',
					url: '',
					route: '',
					style: 9,
					btn: '邀请好友参与活动',
					btnText: '我的代理海报',
					shareBtnStyle: 'solitaire-details-share2',
					type: 2,
					posterData: {
						imageURL: '', // 商品主图URL地址
						productName: '', // 商品名称
						productPrice: '', // 商品价格
						invitemsg: '邀请您参与活动', // 邀请内容。如邀请购买商品，可不传。默认邀请
						type: 'tghd'
					},
					imageUrl: ''
				},
				inviteStyle: {
					fontSize: '24rpx',
					width: '210rpx',
					padding: '0',
					color: '#000000'
				},
				buynowStyle: {
					backgroundColor: '#eb5468',
					color: '#ffffff',
					width: '322rpx',
					border: '0'
				},
				CollageStyle: {
					fontSize: '24rpx',
					width: '150rpx',
					padding: '0',
					color: '#000000'
				},
				Navbar: {
					title1: '我的代理品牌活动',
					title2: '邀请您参与活动',
					background: {
						backgroundColor: '#f3e4e9',
					}
				},
				selfPurchasedReturn: 0,//自己购买返显示的金额
				peculiarity_show: false,//卖点弹窗
				ConsumerCashback: 0//消费者分享返现
			}
		},

		onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.isNotNull(options.docUnid)) {
				this.getSolitaireDetails(options.docUnid);
			} else {
				this.showMSG('error', '出错啦！')
				setTimeout(() => {
					this.goBack()
				}, 2500)
			}
		},

		onPullDownRefresh() {
			this.pageNum = 1
			this.getSolitaireRecords();
		},

		onReachBottom() {
			this.pageNum += 1
			this.getSolitaireRecords();
		},

		onShow() {
			if(this.isNotNull(this.form.id)){
				this.getSolitaireDetails(this.form.id)
			}
		},

		methods: {

			/**
			 * 获取拼团详情
			 */
			async getSolitaireDetails(docUnid) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/queryById",
					id: docUnid,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.form = result.data; // 拼团详情
					// 发起人等于当前用户，则表示为团长视角
					if (this.form.initiatorId == this.userInfo.userId) {
						this.isCreator = true;
					}
					this.getGoodsDetails(this.form.goodsNo, this.form.goodsId); // 获取商品详情
					this.getSolitaireRecords(); // 获取参与拼团记录列表
					this.getEvaluation(this.form.goodsNo); // 获取测评成果
					this.getGoodsActualSales(this.form.goodsId, this.form.goodsNo, this.form.cycle, docUnid); // 获取当前拼团已售商品数量
					this.getGoodsTotalSales(this.form.goodsId, this.form.goodsNo, this.form.cycle); // 获取当前周期商品累积销售量

					if (this.form.status == '1') {
						this.countdowm(this.form.endTime, '活动已结束'); // 倒计时
					} else {
						this.endTimeContent = '活动已结束';
					}

					// 分享组件数据初始化
					this.shareData.docUnid = this.form.id;
					this.shareData.url = '/pages_private_scene2/GroupPurchase/SolitaireDetails?docUnid=' +
						this.form.id;
					this.shareData.route = this.getCurrentPageUrl(this);
					this.shareData.posterData.imageURL = this.form.goodsImages.split(",")[0];
					this.shareData.posterData.productName = this.form.goodsName;
					this.shareData.posterData.productPrice = this.form.unitPrice;
					this.shareData.imageUrl = this.form.goodsImages.split(",")[0];

					// 团长视角分享
					this.shareData2.docUnid = this.form.id;
					this.shareData2.url = '/pages_private_scene2/GroupPurchase/SolitaireDetails?docUnid=' +
						this.form.id;
					this.shareData2.route = this.getCurrentPageUrl(this);
					this.shareData2.posterData.imageURL = this.form.goodsImages.split(",")[0];
					this.shareData2.posterData.productName = this.form.goodsName;
					this.shareData2.posterData.productPrice = this.form.unitPrice;
					this.shareData2.imageUrl = this.form.goodsImages.split(",")[0];
				} else {
					this.$u.toast(result.msg)
				}
			},

			/**
			 * 获取商品详情
			 */
			async getGoodsDetails(goodsNo, goodsId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/goods/get/" + goodsNo + "/" + goodsId,
				});
				if (result.code == 200) {
					this.goods = result.data; // 商品信息
					this.form.specification = this.goods.specification; // 商品规格
					this.form.consumerShareReward = this.goods.consumerShareReward; // 消费者分享报酬
					// this.getCSInfo(this.goods.helpCsId); // 获取帮卖客服信息

					// 计算返利占比：(1 - (百/千/万人团购价 / 玫丽专享价) )*100%，保留两位小数
					// 百人团返利占比
					this.hundredRebateRatio = ((1 - parseFloat(this.goods.hundredPrice) / parseFloat(this.goods.discountPrice)) * 100).toFixed(2) + '%';

					// 千人团返利占比
					this.thousandRebateRatio = ((1 - parseFloat(this.goods.thousandPrice) / parseFloat(this.goods.discountPrice)) * 100).toFixed(2) + '%';

					// 万人团返利占比
					this.tenThousandRebateRatio = ((1 - parseFloat(this.goods.tenThousandPrice) / parseFloat(this.goods.discountPrice)) * 100).toFixed(2) + '%';

					//分享转发微信好友自定义标题
					if(this.isCreator){
						this.shareData.shareTitle = '最高返¥' + (parseFloat(this.goods.consumerShareReward?this.goods.consumerShareReward:0) + parseFloat(this.goods.tenThousandOnlineCashback?this.goods.tenThousandOnlineCashback:0) + parseFloat(this.goods.tenThousandProviderCashback?this.goods.tenThousandProviderCashback:0)).toFixed(2)
													+'！！'+(this.goods.goodsName?this.goods.goodsName:'')
					} else {
						this.shareData.shareTitle = '[全网最低价]¥' + (this.goods.discountPrice?this.goods.discountPrice:0) + '买' + this.goods.goodsName
					}
				}
			},

			/**
			 * 获取帮卖客服详情
			 */
			async getCSInfo(helpCsId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/clientele/get/" + helpCsId,
				});
				if (result.code == 200) {
					this.customerService = result.data;
				}
			},

			/**
			 * 获取当前拼团已售商品数量（实际销量）
			 */
			async getGoodsActualSales(goodsId, goodsNo, cycle, sourceId) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/record/actualSales",
					goodsId: goodsId,
					goodsNo: goodsNo,
					cycle: cycle,
					sourceId: sourceId,// 来源id(拼团主文档id或商品id)
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200 && this.isNotNull(result.data)) {
					// 实际已售
					this.goodsActualSales = result.data;
					if(this.isNotNull(this.goods.foremanReward) && this.isNotNull(this.goodsActualSales)){
						this.estimatedRevenue = (parseFloat(this.goods.foremanReward) * Number(this.goodsActualSales)).toFixed(2);
					}
				} else {
					this.$u.toast(result.msg);
				}
			},

			/**
			 * 获取当前周期商品累积销售量
			 */
			async getGoodsTotalSales(goodsId, goodsNo, cycle) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/record/totalSales",
					goodsNo: goodsNo,
					goodsId: goodsId,
					cycle: cycle,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200 && this.isNotNull(result.data)) {
					// 本轮累计售出
					this.totalGoodsSalesVolume = result.data;

					let preferential_price = 0
					if(this.totalGoodsSalesVolume > 10000){
						preferential_price = this.goods.tenThousandProfit
						this.ConsumerCashback = this.goods.tenThousandConsumerCashback
					}else if(this.totalGoodsSalesVolume > 1000){
						preferential_price = this.goods.thousandProfit
						this.ConsumerCashback = this.goods.thousandConsumerCashback
					}else if(this.totalGoodsSalesVolume > 100){
						preferential_price = this.goods.hundredProfit
						this.ConsumerCashback = this.goods.hundredConsumerCashback
					}
					this.selfPurchasedReturn = (parseFloat(this.goods.foremanReward?this.goods.foremanReward:0) + parseFloat(this.goods.consumerShareReward?this.goods.consumerShareReward:0) + parseFloat(preferential_price?preferential_price:0)).toFixed(2)
				} else {
					this.$u.toast(result.msg);
				}
			},


			/**
			 * 获取参与拼团记录列表
			 */
			async getSolitaireRecords() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/getJoinRecordList",
					mainDocunid: this.form.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200 && result.rows != null) {
					if (this.pageNum != 1) {
						this.solitaireRecords = this.solitaireRecords.concat(result.rows);
					} else {
						this.solitaireRecords = result.rows;
					}
				} else {
					this.showMSG('error', '出错啦！')
				}
			},

			/**
			 * 获取测评成果（BPM）
			 */
			async getEvaluation(goodsNo) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/minrest",
					appid: 'meily',
					wf_num: 'R_meily_BL009',
					goodsNo: goodsNo,
					quantity: '3',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) { // 可以报名
					this.fileList = result.data;
				}
			},

			/**
			 * 发布者(团长)结束拼团
			 */
			async endTheSolitaire() {
				if (this.form.status == '2' || this.endTimeContent == '活动已结束') {
					this.showMSG('none', '活动已结束');
				} else {
					this.endSolitaire_show = true;
				}
			},

			/**
			 * 确认结束拼团
			 */
			async endConfirm() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/finish",
					id: this.form.id,
					status: "2", // 状态。0:废弃；1:启用；2:结束；
					finishTime: this._getTimes(), // 团购实际结束时间
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.form = result.data; // 更新拼团详情
					this.showMSG('none', '活动已结束');
				} else {
					this.showMSG('error', '出错啦！')
				}
			},

			/**
			 * 团长视角点击底部按钮参与返现弹窗
			 */
			showCashReturn() {
				//登录验证
				var loginRes = this.checkLogin(1)
				if (!loginRes) {
					return false;
				}
				if(this.goods.status == '已下架'){
					this.showMSG('none', '商品已下架');
				} else if (this.form.status == '2' || this.endTimeContent == '活动已结束') {
					this.showMSG('none', '活动已结束');
				} else {
					// this.cashReturn_show = true;
					this.goToJoin()
				}
			},

			/**
			 * 消费者视角点击底部按钮立即下单 返现xxx弹窗
			 */
			soonDelegation() {
				//登录验证
				var loginRes = this.checkLogin(1)
				if (!loginRes) {
					return false;
				}
				if(this.goods.status == '已下架'){
					this.showMSG('none', '商品已下架');
				} else if (this.form.status == '2' || this.endTimeContent == '活动已结束') {
					this.showMSG('none', '活动已结束');
				} else {
					// this.soonDelegation_show = true;
					this.goToJoin()
				}
			},

			/**
			 * 参团购买--跳转到购买商品页面
			 */
			async goToJoin() {
				if(this.goods.status == '已下架'){
					this.showMSG('none', '商品已下架');
				} else if (this.form.status == '2' || this.endTimeContent == '活动已结束') {
					this.showMSG('none', '活动已结束');
				} else {
					this.form.remarkReminder = this.goods.remarkReminder;//备注是否需要验证标志
					this.form.reminderContent = this.goods.reminderContent;//备注内容
					// 分享的销售报酬
					this.form.shareProductPrice = parseFloat(this.goods.foremanReward?this.goods.foremanReward:0) + "~" + (parseFloat(this.goods.foremanReward?this.goods.foremanReward:0) + parseFloat(this.goods.tenThousandOnlineCashback?this.goods.tenThousandOnlineCashback:0) + parseFloat(this.goods.tenThousandProviderCashback?this.goods.tenThousandProviderCashback:0)).toFixed(2);
					let solitaire = JSON.stringify(this.form)
					uni.navigateTo({
						url: "/pages_private_scene2/GroupPurchase/JoinSolitaire?solitaire=" +
							encodeURIComponent(solitaire)
					});
				}
			},

			/**
			 * 跳转到订单详情
			 */
			toRecordDetails(item) {
				if (this.form.initiatorId == this.userInfo.userId) {
					// 发起人可查看所有记录
					this.$u.route('/pages_private_scene2/GroupPurchase/OrderDetails?recordId=' + item.id);
				} else if (item.partnerId == this.userInfo.userId) {
					// 判断是否为自己的记录，若不是，则不跳转
					this.$u.route('/pages_private_scene2/GroupPurchase/OrderDetails?recordId=' + item.id);
				}
			},

			/**
			 * 玫丽销售工作须知(弹窗)
			 */
			showInstructions() {
				if (this.isCreator) {
					this.salesInstructions_show = true;
				} else {
					this.buyInstructions_show = true;
				}
			},

			/**
			 * 偏远地区邮费
			 */
			viewFreight() {
				this.freight_show = true;
			},

			/**
			 * 查看全部测评成果
			 */
			viewAllEvaluation() {
				this.$u.route('/pages_private_scene2/GroupPurchase/AllEvaluationResults?goodsNo=' + this.form.goodsNo);
			},

			/**
			 * 购买须知
			 */
			viewNotice() {
				this.buyNotice_show = true
			},

			/**
			 * 售后服务
			 */
			salesService() {
				this.afterSales_show = true
			},

			/**
			 * 客服
			 */
			contactCS() {
				console.log("********")
				console.log(this.customerService)
				if (this.isNotNull(this.customerService.csQrCode)) {
					this.customerService_show = true
				} else {
					this.showMSG('none', '请联系平台管理员')
				}
			},

			/**
			 * 点击联系客服
			 */
			async openCustomerServiceChat() {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/qyapi/kf/account/url/".concat(globalData.openKfid_preSales),
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					const pages = getCurrentPages(); // 获取栈实例
					//当前页面路径(带参数)
					let currentPage = pages[pages.length - 1]['$page']['fullPath']
					let kfUrl = result.data
					wx.openCustomerServiceChat({
						extInfo: {
							url: kfUrl
						},
						corpId: globalData.corpId,
						showMessageCard: true,
						sendMessagePath: currentPage,
						success(res) {
							console.log(res)
						}
					})
				} else {
					this.showMSG('error', '出错啦！');
				}
			},

			/**
			 * 唤起分享弹窗
			 */
			wakeUpShare(){
				//登录验证
				var loginRes = this.checkLogin(1)
				if (!loginRes) {
					return false;
				}
				if(this.goods.status == '已下架'){
					this.showMSG('none', '商品已下架');
				} else {
					if(this.isCreator){
						this.shareData.shareTitle = '[全网最低价]¥' + (this.goods.discountPrice?this.goods.discountPrice:0) + '买' + this.goods.goodsName
					}
					this.$refs.sharebtn.wakeUpPop()
				}
			},

			showTips(){
				if(this.goods.status == '已下架'){
					this.showMSG('none', '商品已下架');
				}
			},

			/**
			 * 卖点弹窗
			 */
			showPeculiarity() {
				this.peculiarity_show = true
			},

			/**
			 * 将换行符转成<br>
			 * @param {Object} str
			 */
			escapeBR(str) {
			  return str.replace(/\n/g, "<br>");
			},

			/**
			 * 分享回调函数
			 */
			async shareSuccessCallBack(obj){
				console.log("**************************");
				console.log("开始执行，分享回调函数...");
				console.log("obj=", obj);
				// 保存分享次数
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/behavior/statistics/update",
					createUser: userInfo.userId,
					createUserName: userInfo.nickName,
					createUserAvatar: userInfo.avatarUrl,
					behaviorId: this.goods.goodsId,
					behaviorName: this.goods.goodsName,
					behaviorType: '1',// 分享
					sourceId: obj.NewId,// 分享记录唯一id
					sourceType: '1',// 团购
					remark: '',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				console.log(result);
				console.log("分享回调函数，执行结束！");
				console.log("**************************");
			},

		},
	};
</script>

<style scoped>
  .shel-a-try {
    width: 650rpx;
    height: 86rpx;
    border: 2rpx solid #c5c3c4;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    color: #b1b1b1;
    justify-content: center;
    align-items: center;
  }
	.n-price {
		height: 50px;
		width: 93%;
		margin: 0 auto;
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.n-price__left {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		line-height: 110rpx;
	}

	.n-price .curprice {
		font-size: 15px;
		color: #e31436;
	}

	.n-price .curprice .curnum {
		font-size: 44rpx;
		font-weight: bold;
	}

	.n-price .mrkprice {
		text-decoration: line-through;
		margin-left: 5rpx;
		font-size: 30rpx;
		color: #999;
	}

	.n-price .tag {
		display: inline-block;
		padding: 0 5px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		margin-left: 10px;
		vertical-align: 2px;
		font-size: 11px;
		color: #fff;
		background: #ff8587;
		border-radius: 3px;
	}

	.n-prdinfo {
		margin: 0 10px 10px;
		border-top: 1px solid #f0f0f0;
	}

	.n-prdinfo .tit {
		line-height: 32rpx;
		/* padding-top: 10px; */
		margin-bottom: 12rpx;
		width: 100%;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.n-prdinfo .subtit {
		font-size: 13px;
		color: #333;
		line-height: 21px;
	}

	.n-prdinfo .subtit .spec {
		color: #e31436;
	}

	.n-prdinfo .presaletxt {
		color: #f00;
	}

	.u-graybar {
		background: #f1f1f1;
		height: 10px;
	}

	.n-activitybox {
		background-color: #FFFFFF;
		width: 90%;
		margin: 0 auto;
	}

	.n-activitybox .itm {
		position: relative;
		padding: 9px 0;
		/* border-bottom: 1px solid #f0f0f0; */
		zoom: 1;
	}

	.n-activitybox .itm:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}

	.n-activitybox .itm .name {
		float: left;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
		color: #6f6e6e;
	}

	.n-activitybox .itm .cnt {
		margin-left: 50px;
		padding-top: 1px;
		padding-right: 10px;
	}

	.n-activitybox .itm:last-child {
		border-bottom: none;
	}

	.n-activitybox .v-linkicon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0px;
		width: 10px;
		height: 10px;
		margin-top: auto;
		margin-bottom: auto;
		background-size: 200px;
	}


	.mrkprice {
		padding-left: 8rpx;
	}

	.v-sperate {
		height: 10rpx;
		background: #f7f1f7;
	}

	.n-goodsdetailbar {
		position: relative;
		height: 44px;
	}

	.n-goodsdetailbar .txt {
		position: absolute;
		top: 0;
		left: 0px;
		z-index: 9;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.n-goodsdetailbar .v-img {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 90rpx;
	}

	img {
		vertical-align: middle;
		border: 0;
	}

	.m-buybar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		/* height: 200rpx; */
		background: #fff;
		padding-top: 15rpx;
		padding-bottom: 50rpx;
	}

	.m-buybar .btn-wrap {
		width: 95%;
		margin: 0 auto;
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}

	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.m-buybar .buynow {
		color: #fff;
		background: #e31436;
	}

	.m-buybar .buynow.btn-large {
		border: none;
		background-color: #d22147;
		color: #fff;
	}

	.m-buybar .buynow.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .buynow.s-fc {
		background: #000;
	}

	.m-buybar .addcart {
		background-color: #ff8587;
		color: #fff;
	}

	.m-buybar .addcart.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .collect {
		position: relative;
		/* width: 95px; */
		width: 140rpx;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		/* border-right: 1px solid #ddd; */
		color: #666;
		font-size: 24rpx;
	}

	.m-buybar .collect:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 7px;
		left: 17px;
		background-size: 200px;
	}

	.m-buybar .collect-1 {
		background-position: -161px 1px;
	}

	.m-buybar .collect-1:after {
		background-position: -139px -33px;
	}

	.m-buybar .cart {
		position: relative;
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
		background-size: 200px;
	}

	.m-buybar .cart .count {
		position: absolute;
		min-width: 16px;
		height: 16px;
		left: 27px;
		top: 2px;
		background-color: #fff;
		color: #e31436;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		padding: 0 4px;
		border: 1px solid #e31436;
	}

	.m-buybar .nogoods {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		padding-left: 10px;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: left;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .nogoods:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 45px;
		left: 10px;
		top: -35px;
		background-size: 200px;
	}

	.m-buybar .cantdeliver {
		position: absolute;
		text-align: center;
		top: -40px;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		font-size: 12px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .hide {
		display: none;
	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.itm-value {
		font-weight: 500;
	}

	.f-els-1 {
		line-height: 48rpx;
	}

	.recovery {
		color: #fff;
		background: #eab315;
	}

	.view-pro {
		color: #fff;
		background: #3b79fe;
	}

	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}

	.infoblocks {
		background-color: #FFFFFF;
	}

	.remark-box {
		/* width: 95%; */
		margin: 0 auto;
	}

	.remark-rule {
		margin: 0rpx 40rpx 0rpx 40rpx;
	}

	.remark-rule-title {
		color: #6f6e6e;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
	}

	.line-through {
		font-size: 32rpx;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}

	.price-area {
		color: red;
		display: flex;
	}

	.commodity-name {
		width: 93%;
		margin: 0 auto;
		color: #000000;
	}

	.work-free {
		width: 93%;
		margin: 0 auto;
		background-color: #fef9e6;
		color: #000000;
		padding: 20rpx;
	}

	.work-free .text1 {
		color: #3e3d3d;
	}

	.work-free .text2 {
		color: #7d7d7d;
	}

	.work-free .text2 span {
		color: red;
	}

	.notice-area {
		color: #7d7d7d;
		width: 93%;
		margin: 0 auto;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		float: left;
		display: inline;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-content {
		display: inline;
		width: 80px;
		height: 80px;
	}

	.aui-flex-title {
		font-weight: bold;
		color: #1d1b1b;
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.aui-flex-time {
		font-size: 24rpx;
		color: #bcbcbc;
		padding-top: 15rpx;
	}

	.solitaire-box {
		width: 95%;
		margin: 0 auto;
	}

	.certificate {
		/* border-top: 1px solid rgba(0, 0, 0, .08);
		margin-top: -6rpx; */
		/* padding: 0 32rpx 0; */
	}

	.certificateItemMain {
		border-radius: 20rpx;
		overflow: hidden;
		/* padding: 0 32rpx; */
	}

	.certificateItem {
		align-items: center;
		/* border-bottom: 1px solid rgba(0, 0, 0, .08); */
		display: block;
		flex-direction: row;
		justify-content: space-between;
		padding: 25rpx 0;
	}

	.messageItem .messageTop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.messageTop .imgbox {
		border-radius: 10rpx;
		height: 72rpx;
		overflow: hidden;
		width: 72rpx;
		margin-right: 8px;
	}

	.messageItem .messageTop .imgbox ._img {
		display: block;
		height: 72rpx;
		width: 72rpx;
	}

	.messageItem .messageTop .name {
		color: #000;
		font-size: 28rpx;
		line-height: 1.2;
		overflow: hidden;
		padding-left: 0rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.messageItem .messageTop .name .text1 .quantity_text {
		font-weight: 400;
	}

	.messageItem .messageTop .quantity {
		color: #000;
		font-size: 28rpx;
		line-height: 2.2;
		white-space: nowrap;
	}

	.messageItem .messageTop .quantity .quantity_text {
		color: red;
		font-size: 28rpx;
		font-weight: 400;
	}

	.quantity {
		padding-right: 20rpx;
	}

	.messageItem .messageTop .name .text1 {
		color: rgba(0, 0, 0, .5);
		font-size: 24rpx;
		font-weight: 400;
	}

	.messageItem .messageTop .name .text2 {
		color: rgba(0, 0, 0, .5);
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 10rpx;
	}

	.messageItem .messageCenter {
		color: rgba(0, 0, 0, .8);
		font-size: 28rpx;
		margin-top: 32rpx;
	}

	.messageItem .messageBottom {
		padding: 32rpx 0;
	}

	.red-area {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-image: linear-gradient(to right, #fc4f48, #fe6a44);
	}

	.red-area .tips {
		color: #ffffff;
		font-size: 22rpx;
		padding-top: 5rpx;
	}

	.red-area .tag {
		padding: 3rpx 20rpx;
		background-color: #ffffff;
		color: #000000;
		border-radius: 5rpx;
		font-size: 26rpx;
	}

	.red-area .price {
		color: #ffffff;
		font-size: 50rpx;
		font-weight: bold;
		line-height: 60rpx;
	}

	.discount-price {
		line-height: 100rpx;
		font-weight: bold;
		font-size: 48rpx;
	}

	.font-thin {
		font-weight: 400;
	}

	.deliver-goods {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.deliver-goods .left {
		width: 480rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.deliver-goods1 {
		margin: 20rpx 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.specs-goods {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.specs-goods .left {
		width: auto;
	}

	.specs-goods .right {
		width: 90%;
		word-break: normal;
		display: block;
		white-space: pre-wrap;
		overflow: hidden;
	}

	.color-gray {
		color: #9f9d9e;
	}

	.width93 {
		width: 93%;
		margin: 0 auto;
	}

	.evaluation-show-title {
		margin: 10rpx 0rpx;
		display: flex;
		justify-content: space-between;
	}

	.evaluation-show-title .left {
		margin: 20rpx 0rpx;
		font-weight: bolder;
		font-size: 40rpx;
	}

	.evaluation-show-title .right {
		height: 100rpx;
		line-height: 100rpx;
		/* font-size: 30rpx; */
		color: #9f9d9e;
	}

	.goods-details-title {
		margin: 20rpx 0;
		font-weight: bolder;
		font-size: 40rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.follow-group {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.modal-item {
		/* margin: 40rpx 0rpx; */
		height: 100rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* color: #9f9d9e; */
		border-top: 1rpx solid #eeeded;
	}

	/* 商品列表 */
	.aui-list-box {
		overflow: hidden;
		position: relative;
	}

	.aui-list-item {
		width: 48%;
		float: left;
		margin: 0 1% 2% 1%;
		background: #fff;
		display: block;
		overflow: hidden;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.aui-list-theme-img {
		height: auto;
		width: 100%;
		position: relative;
	}

	.aui-list-theme-img img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
	}

	/* 两行或多行显示... */
	.line-ellipsis {
		width: 320rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}

	.aui-list-theme-message {
		background: #ffffff;
		padding: 10rpx 10rpx;
	}

	.aui-list-theme-title {
		color: #4a4a4a;
		font-size: 32rpx;
		line-height: 38rpx;
		margin-top: 5rpx;
	}

	.aui-list-theme-message p {
		font-size: 24rpx;
		font-weight: bold;
	}

	.aui-list-theme-message span.line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}

	.aui-list-theme-message span.none-line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
	}

	.aui-list-theme-message p i {
		font-style: normal;
		font-size: 0.7rem;
		padding: 0 0.2rem;
		color: #ff3b52;
		float: right;
		width: 25px;
		height: 25px;
	}

	.aui-list-theme-message p em {
		font-style: normal;
		font-size: 0.7rem;
		color: #ff3b52;
		text-decoration: line-through;
		font-weight: normal;
	}

	.pictrues-box {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 40rpx;
	}

	.customStyle-btn {
		height: 90rpx;
		border: none !important;
		background-color: transparent;
		margin-left: 0;
		margin-right: 15rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}

	.customStyle-btn::after {
		border: none;
	}

	.customStyle-btn-span {
		font-size: 20rpx;
		color: #000000;
		line-height: 45rpx;
	}

	.slot-content2 {
		font-size: 28rpx;
		/* color: #bcbcbc; */
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.slot-content3 {
		font-size: 32rpx;
		/* color: #bcbcbc; */
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.slot-content4 {
		font-size: 30rpx;
		text-align: left;
		width: 85%;
		margin: 0 auto;
		padding-top: 60rpx;
		padding-bottom: 40rpx;
	}

	.have-a-try {
		width: 230rpx;
		height: 86rpx;
		border: 2rpx solid #9f9d9e;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.have-a-try .price {
		line-height: 36rpx;
		color: #000000;
		font-weight: bold;
	}

	.have-a-try1 {
		width: 265rpx;
		height: 86rpx;
		border: 2rpx solid #9f9d9e;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.color-red {
		color: red;
	}

	.pl-3 {
		padding-left: 3rpx;
	}

	.pl-5 {
		padding-left: 5rpx;
	}

	.share-link {
		width: 430rpx;
		height: 86rpx;
		/* border: 2rpx solid #9f9d9e; */
		border-radius: 10rpx;
		/* background-color: #e55e97; */
		color: #ffffff;
		font-weight: 200;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.share-link .price {
		line-height: 36rpx;
		font-weight: bold;
		padding-left: 3rpx;
	}

	.goods-title-tag {
		padding: 0rpx 5rpx;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
	.middile {
		vertical-align: middle;
	}

	.peculiarity-icon {
		color: #f4e7db;
		padding: 5rpx 20rpx;
		border-radius: 25rpx;
		background: linear-gradient(to right, #1e1a17, #4b3e36);
	}

	.peculiarity-text {
		width: 500rpx;
		text-align: right;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.n-price-1 {
		height: 100rpx;
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: center;
	}

	.countdown-area {
		width: 210rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: right;
		color: #f4e7db;
		/* background-image: linear-gradient(to right, #1e1a17,#4b3e36); */
		background-color: #4b3e36;
		height: 70rpx;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
	}

</style>
